<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素样式\尺寸操作</title>
		<!-- 元素样式操作：直接操作元素的样式下的属性和属性值
		 css()      功能--
		             1个参：传入css属性名
					 功能：获取匹配元素集合中第一个元素的css的属性值
					 2个参：传入css属性名和属性值
					 功能：设置匹配元素集合中所有元素的css的属性值
					 n个参：传入多个css属性名和属性值
					 语法糖：css({"属性名":"属性值",
					             "属性名":"属性值"
								 .......
								 "属性名":"属性值"
								 })
		 width()和height()    功能：匹配元素集合中第一个元素宽高度
		                      无参：获取匹配元素集合中第一个元素宽高度
							  有参：设置匹配元素集合中第一个元素宽高度
							  width(数值)
		 outerWidth和outerHeight()
		出现原因：元素存在盒子中，盒子模型，宽度计算方式：内外边距+边框+内容
		无参：获取元素的宽高度，计算盒子模型：内边距+边框
		有参：传入bool值，true时，计算盒子模型：内外边距+边框-->
		 
		 <style>
			 div.box{
				 background-color: #eaddff;
				 margin: 20px;
				 padding: 20px;
				 border: 5px solid #c2ffdf;
			 }
			 div.result{
				 margin-top: 10px;
				 font-weight: 700;
			 }
		 </style>
		 <script src="../js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- css:.box添加样式：背景颜色、内外边距：20px 边框：5px
		         .result添加样式：上外边距：10px  字体加粗-->
		<!-- 创建两个div平行  6个按钮 -->
		<!-- 1.显示效果区域 -->
		<div class="box" id="targetBox"></div>
		<button id="getColorbtn">获取颜色属性值</button>
		<button id="setColorbtn">设置颜色属性值</button>
		<button id="setbtn">设置多属性效果</button>
		<button id="gsbtn">获取元素宽度/设置元素高度</button>
		<button id="bpbtn">获取高度（内边距+边框）</button>
		<button id="bpmbtn">获取高度（内外边距+边框）</button>
		<!-- 2.结果提示功能区域 -->
		<div class="result" id="result"></div>
		<script>
			/* 1.点击s 获取颜色属性值 按钮 获取颜色值并打印页面上*/
			$("#getColorbtn").click(function(){
				//获取css属性值方式：传入属性名即可
				var bgColor=$(".box").css("background-color");
				//页面上打印属性值
				$("#result").text("获取的属性值是"+bgColor);
			});
			/* 2.点击 获取颜色属性值 按钮 设置颜色值并打印在页面上 */
	       $("#setColorbtn").click(function(){
			   //改成橙色
			   $(".box").css("background-color","orange");
			   $("resuit").text("改变后的颜色为：橙色");
		   });	
		   /* 3.点击 设置多属性效果 按钮 元、背景色、阴影*/
		    $("#setbtn").click(function(){
			   $(".box").css({"background-image":"url(../img/1.gif)",
                              "border":"5px solid #e7e8ff",
							  "border-radius":"50%",
							  "width":"200px",
					          "height":"200px",
							  "background-size":"100% 100%",
							  "box-shadow":"5px 5px 10px #f5f5f5"
			   });
		   }); 
		   /* 4.点击 获取、设置宽度*/
		   $("#gsbtn").click(function(){
			   var w=$(".box").width(400);
			   $("#result").text("获取宽度是"+w+"px");
		   });
		   /* 5. 点击 获取高度 按钮 计算box高度*/
		   $("#bpbtn").click(function(){
			   var bp=$(".box").outerHeight();
			   $("#result").text("获取高度为"+bp);
		   });
		   $("#bpmbtn").click(function(){
			   var bp=$(".box").outerHeight(true);
			   $("#result").text("获取高度为"+bp);
		   });
		</script>
	</body>
</html>